<template>
  <div>
    <router-view></router-view>
    <div class="tabbar-bottom"></div>
    <mt-tabbar v-model="selected"
               v-show="tabShow"
               fixed>
      <mt-tab-item to="/"
                   id="home">
        <!-- <img slot="icon"
             src="https://cn.vuejs.org/images/logo.png">  -->
        <div class="iconfont tab-icon">&#xe626;</div>首页
      </mt-tab-item>
      <mt-tab-item id="mailList">
        <div class="iconfont tab-icon">&#xe63a;</div>通讯录
      </mt-tab-item>
      <mt-tab-item id="mySet">
        <div class="iconfont tab-icon">&#xe606;</div>设置
      </mt-tab-item>
      <mt-tab-item id="myDetail">
        <div class="iconfont tab-icon">&#xe691;</div>我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabItem } from 'mint-ui'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    [Tabbar.name]: Tabbar,
    [TabItem.name]: TabItem
  },
  computed: {
    ...mapState(['tabSelected'])
  },
  data () {
    return {
      active: 0,
      activeName: '首页',
      selected: this.tabSelected || 'home',
      tabShow: true,
      tabList: ['home', 'mailList', 'mySet', 'myDetail']
    }
  },
  watch: {
    selected (val, oldVal) {
      // home mailList mySet myDetail
      this.$router.push('/' + val)
      let tabSelected = this.tabSelected
      if (this.tabList.indexOf(tabSelected) >= 0) {
        this.tabShow = true
      } else {
        this.tabShow = false
      }
    },
    tabSelected () {
      this.selected = this.tabSelected
    }
  },
  methods: {
    tabbarChange (active) {
      this.activeName = this.$Filters.activeName(active)
    }
  },
  mounted () {
    this.selected = this.tabSelected
  }
}
</script>

<style lang="stylus" scoped>
.tabbar-bottom
  height: 55px
.tab-icon
  font-size: 0.4rem
  padding-bottom: 0.1rem
</style>
